<template>
	<main-content
		:class="{'editDomeShow': !editDomeShow}"
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template v-if="editDomeShow">
			<template slot="query">
				<el-form
					ref="form"
					:inline="true"
					:model="queryData"
					label-width="auto"
				>
					<el-form-item
						:label="$t('common.choose_merchant') + ':'"
						prop="maxLevels"
					>
						<merchant-select
							v-model="queryData.merchantId"
							:clearable="true"
						></merchant-select>
					</el-form-item>
					<el-form-item>
						<el-input
							v-model="selectSearchVal"
							clearable
							size="medium"
							:placeholder="$t('common.please_enter')"
						>
							<el-select
								slot="prepend"
								v-model="selectSearchType"
								style="width: 120px"
								:placeholder="$t('common.please_choose')"
								@change="selectSearchTypeHandle"
							>
								<el-option
									:label="$t('agent.domain')"
									:value="1"
								></el-option>
								<el-option
									:label="$t('common.createBy')"
									:value="2"
								></el-option>
								<el-option
									:label="$t('common.last_updateBy')"
									:value="3"
								></el-option>
							</el-select>
						</el-input>
					</el-form-item>

					<el-form-item
						:label="$t('common.status') + ':'"
						class="tagheight"
					>
						<el-select
							v-model="queryData.status"
							style="width: 120px"
							clearable
							:placeholder="$t('common.all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in domainStatusType"
								:key="item.description"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item
						:label="$t('agent.domain_type')"
						class="tagheight"
					>
						<el-select
							v-model="queryData.domainType"
							style="width: 120px"
							clearable
							:placeholder="$t('common.all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in enumProxyDomainTypeOperate"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>

					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							:loading="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('203011') && isShow"
							type="warning"
							icon="el-icon-folder"
							:disabled="loading"
							size="medium"
							@click="domainLabel($t('common.create'))"
						>
							{{ $t('agent.add') }}
						</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template v-if="isShow" slot="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					:max-height="tableHeight"
					:header-cell-style="getRowClass"
					highlight-current-row
				>
					<el-table-column
						prop="displayOrder"
						align="center"
						:label="$t('common.sort')"
						width="100"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.displayOrder || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="domainName"
						align="center"
						:label="$t('agent.domain')"
						min-width="250"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.domainName || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="description"
						min-width="200px"
						align="center"
						:label="$t('agent.description')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.description || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="status"
						align="center"
						:label="$t('agent.status')"
						width="100"
					>
						<template slot-scope="scope">
							<div
								v-if="scope.row.status === '1'"
								class="normalRgba"
							>
								{{
									typeFilter(
										scope.row.status,
										'domainStatusType'
									)
								}}
							</div>
							<div v-else class="disableRgba">
								{{
									typeFilter(
										scope.row.status,
										'domainStatusType'
									)
								}}
							</div>
						</template>
					</el-table-column>
					<el-table-column
						prop="domainType"
						align="center"
						:label="$t('agent.domain_type')"
						width="100"
					>
						<template slot-scope="scope">
							{{
								typeFilter(
									scope.row.domainType,
									'enumProxyDomainTypeOperate'
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						prop="remark"
						align="center"
						min-width="200px"
						:label="$t('common.remark')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.remark || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="createdBy"
						align="center"
						:label="$t('common.createBy')"
						width="120px"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.createdBy || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="createdAt"
						align="center"
						:label="$t('common.createAt')"
						width="160"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.createdAt || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedBy"
						align="center"
						:label="$t('common.last_updateBy')"
						width="120"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.updatedBy || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="updatedAt"
						align="center"
						:label="$t('common.last_updateAt')"
						width="160px"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.updatedAt || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="operating"
						align="center"
						:label="$t('common.actions')"
						width="300"
						fixed="right"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('203014')"
								:disabled="loading"
								type="success"
								size="medium"
								class="noicon"
								@click="
									codeAndLink(
										$t('agent.generate_qrcode'),
										scope.row
									)
								"
							>
								{{ $t('agent.qrcode') }}
							</el-button>
							<el-button
								v-if="hasPermission('203015')"
								type="warning"
								:disabled="loading"
								size="medium"
								@click="
									codeAndLink(
										$t('agent.generate_short_link'),
										scope.row
									)
								"
							>
								{{ $t('agent.short_link') }}
							</el-button>
							<el-button
								v-if="hasPermission('203012')"
								type="primary"
								icon="el-icon-edit"
								:disabled="loading"
								size="medium"
								@click="domainLabel(scope.row)"
							>
								{{ $t('common.edit') }}
							</el-button>

							<el-button
								v-if="hasPermission('203013')"
								:disabled="scope.row.status === '1'"
								type="danger"
								size="medium"
								class="noicon"
								icon="el-icon-delete"
								@click="deleteLabel(scope.row)"
							>
								{{ $t('common.delete') }}
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
			<el-dialog
				:title="mTitle"
				:visible.sync="dialogGameVisible"
				:destroy-on-close="true"
				width="480px"
				class="rempadding"
				center
			>
				<el-row
					v-if="mTitle === $t('agent.generate_qrcode')"
					type="flex"
					justify="space-around"
				>
					<el-col class="imgBox">
						<vue-qr
							v-if="wechatShortChain"
							:text="wechatShortChain"
						></vue-qr>
						<img v-else src="" alt="" />
					</el-col>
					<el-col class="imgBox">
						<vue-qr
							v-if="qqShortChain"
							:text="qqShortChain"
						></vue-qr>
						<img v-else src="" alt="" />
					</el-col>
				</el-row>
				<el-row
					v-if="mTitle === $t('agent.generate_qrcode')"
					type="flex"
					justify="space-around"
					class="textCenter"
				>
					<el-col>
						<h5>{{ $t('agent.anti_block_wx_qrcode') }}</h5>
					</el-col>
					<el-col>
						<h5>{{ $t('agent.anti_block_qq_qrcode') }}</h5>
					</el-col>
				</el-row>
				<el-row v-else class="marginT">
					<el-col>
						<h5>{{ $t('agent.anti_block_wx_short_chains') }}：</h5>
						<Copy
							v-if="wechatShortChain"
							:title="wechatShortChain"
							:copy="copy"
						></Copy>
						<p v-else>{{ $t('agent.no_data') }}</p>
					</el-col>
					<el-col>
						<h5>{{ $t('agent.anti_block_qq_short_chains') }}：</h5>
						<Copy
							v-if="qqShortChain"
							:title="qqShortChain"
							:copy="copy"
						></Copy>
						<p v-else>{{ $t('agent.no_data') }}</p>
					</el-col>
				</el-row>
				<div slot="footer" class="dialog-footer">
					<el-button
						type="primary"
						@click="dialogGameVisible = false"
					>
						{{ $t('common.sure') }}
					</el-button>
				</div>
			</el-dialog>
		</template>
		<editDome
			v-else
			ref="editDome"
			:editData="editData"
			:control="control"
			@change-type="onChangeType"
		></editDome>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
// import VueQr from 'vue-qr'
import VueQr from 'vue-qr/src/packages/vue-qr.vue'
import { filterEmptyParams } from '@/utils'
import MainContent from '@/components/MainContent/index.vue'
export default {
	name: routerNames.domainNameManagement,
	components: {
		VueQr,
		editDome: () => import('./components/editDome'),
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			isShow: false,
			queryData: { status: '', merchantId: '' },
			selectSearchType: 1,
			selectSearchVal: '',
			tableData: [],
			dialogFormVisible: false,
			dialogForm: {},
			mTitle: '',
			dialogGameVisible: false,
			wechatQrCode: '',
			qqQrCode: '',
			wechatShortChain: '',
			qqShortChain: '',
			editDomeShow: true,
			editData: {},
			control: false,
			maxlength: 50
		}
	},
	computed: {
		domainStatusType() {
			const domainStatusType = this.globalDics.domainStatusType || []
			return [...domainStatusType]
		},
		enumProxyDomainTypeOperate() {
			return this.globalDics.enumProxyDomainTypeOperate || []
		},
		appIdArr() {
			return this.globalDics.appId || []
		},
		accountTypeArr() {
			return this.globalDics.accountType || []
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
			this.loadData()
		}
	},
	methods: {
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		search() {
			this.pageNum = 1
			this.loadData()
			// if (!this.$store.getters.isZk) {
			// 	this.queryData.merchantId = this.queryData.merchantId
			// 		? this.queryData.merchantId
			// 		: this.$store.getters.merchantInfo.id
			// 	this.loadData()
			// } else {
			// 	if (!this.queryData.merchantId) {
			// 		this.$message({
			// 			message: this.$t('common.components.select_merchant'),
			// 			type: 'error'
			// 		})
			// 	} else {
			// 		this.loadData()
			// 	}
			// }
		},
		selectSearchTypeHandle(val) {
			this.selectSearchVal = ''
			// if (val === 1) {
			// 	this.maxlength = 50
			// } else {
			// 	this.maxlength = 12
			// }
		},
		loadData() {
			// if (!this.queryData.merchantId) return
			this.loading = true
			this.queryData.domainName = ''
			this.queryData.createdBy = ''
			this.queryData.updatedBy = ''
			if (this.selectSearchType === 1) {
				this.queryData.domainName = this.selectSearchVal
			} else if (this.selectSearchType === 2) {
				this.queryData.createdBy = this.selectSearchVal
			} else if (this.selectSearchType === 3) {
				this.queryData.updatedBy = this.selectSearchVal
			}
			let params = {
				...this.queryData
			}
			params = {
				...this.getParams(params)
			}
			this.$api
				.getDomainSelect(filterEmptyParams(params))
				.then((res) => {
					if (res?.code === 200) {
						this.isShow = true
						const { record, totalRecord } = res.data || {}
						this.total = totalRecord || 0
						this.tableData = Array.isArray(record)
							? Object.freeze(record)
							: []
					}
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.selectSearchVal = ''
			this.selectSearchType = 1
			this.queryData = {
				merchantId: '',
				status: '',
				domainType: ''
			}
			this.pageNum = 1
			this.search()
			// if (!this.$store.getters.isZk) {
			// 	this.queryData.merchantId = this.$store.getters.merchantInfo.id
			// 	this.search()
			// } else {
			// 	this.queryData.merchantId = undefined
			// 	this.isShow = false
			// 	this.tableData = []
			// }
		},
		domainLabel(val) {
			this.editDomeShow = false
			const appId = val.appId + ''
			const {
				id,
				merchantId,
				description,
				displayOrder,
				domainName,
				domainType,
				remark,
				status
			} = {
				...val
			}
			if (val === this.$t('common.create')) {
				this.editData = {
					id,
					description,
					displayOrder,
					domainName,
					remark,
					status,
					domainType: '0'
				}
				this.editData.status = '0'
				this.editData.merchantId = this.queryData.merchantId || ''
				this.control = false
			} else {
				this.editData = {
					id,
					description,
					displayOrder,
					domainName,
					remark,
					status,
					merchantId,
					domainType: domainType + '',
					appId
				}
				this.control = true
			}
		},
		onChangeType(type) {
			// type是子组件$emit传递的参数
			this.editDomeShow = type
		},
		// 二维码、短链接
		codeAndLink(val, row) {
			this.mTitle = val
			this.wechatQrCode = row.wechatQrCode
			this.qqQrCode = row.qqQrCode
			this.wechatShortChain = row.wechatShortChain
			this.qqShortChain = row.qqShortChain
			// this.wechatQrCode = row.domainName
			// this.qqQrCode = row.domainName
			// this.wechatShortChain = row.domainName
			// this.qqShortChain = row.domainName
			this.dialogGameVisible = true
		},
		deleteLabel(val) {
			this.$confirm(
				`<strong>${this.$t(
					'agent.is_delete_config'
				)}?</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
					'agent.rule_careful_tip'
				)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					this.$api.setDomainDelete({ id: val.id }).then((res) => {
						if (res?.code === 200) {
							this.$message.success(
								this.$t('agent.delete_success')
							)
							this.loadData()
						}
					})
				})
				.catch(() => {})
		},
		_changeTableSort({ column, prop, order }) {
			if (prop === 'createdAt') {
				prop = 1
			}
			if (prop === 'updatedAt') {
				prop = 2
			}
			this.pageNum = 1
			this.queryData.orderKey = prop
			if (order === 'ascending') {
				// 升序
				this.queryData.orderType = 'asc'
			} else if (order === 'descending') {
				// 降序
				this.queryData.orderType = 'desc'
			} else {
				delete this.queryData.orderKey
				delete this.queryData.orderType
			}
			this.loadData()
		},
		enterSubmit() {
			this.loadData()
		}
	}
}
</script>

<style>
.editDomeShow .params{
	display: none;
}
.editDomeShow .content{
	display: none;
}
</style>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
::v-deep .rempadding .el-dialog__body {
	padding: 0;
}

.decoration {
	text-decoration: underline;
	cursor: pointer;
}
.bodyBox {
	max-height: 400px;
	overflow: auto;
}
p {
	display: flex;
	border-bottom: 1px solid #e8e8e8;
	justify-content: space-around;
	span {
		line-height: 20px;
	}
}
.headerBox {
	color: #000000d8;
	background: #fafafa;
	font-family: 'PingFang SC ', 'PingFang SC', sans-serif;
	font-weight: 650;
	border-top: 1px solid #e8e8e8;
	margin-top: 15px;
}
.textCenter {
	text-align: center;
	padding-bottom: 10px;
	background: #e8e8e8;
	h5 {
		margin: 0 auto;
	}
}
.imgBox {
	height: 180px;
	text-align: center;
	padding: 15px 0;
	background: #e8e8e8;
	img {
		width: 150px;
		height: 150px;
	}
}
.marginT {
	padding: 0 30px;
	margin-top: 15px;
	h5 {
		margin: 0;
		margin-top: 15px;
	}
	p {
		display: inline-block;
		border: none;
		font-size: 14px;
		span {
			padding: 5px;
		}
	}
}
::v-deep .el-input-group__prepend {
	background-color: #fff;
}
</style>
